<template>
  <div>

    <basic-container>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" :model="formInline" >
        <div style="margin-top: 22px">
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleExport"   >下载</el-button>
          </el-form-item>
        </div>
      </el-form>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            :summary-method="getSumSpendPay"
            show-summary
            style="width: 100%">
            <el-table-column
              prop="typeName"
              label="类型" key="1">

            </el-table-column>
            <el-table-column
              prop="promoteMangerName"
              label="归属主管(项目部)" key="1">

            </el-table-column>
            <el-table-column
              prop="lySpendPayAmountXyWx"
              label="翔宇微信" key="1">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1">
<!--                  ({{scope.row.lySpendPayAmountWxNative}} = {{scope.row.lySpendPayAmountWxNativeJz}} + {{scope.row.lySpendPayAmountWxNativeXy}})-->
                  <span v-if="scope.row.lySpendPayAmountXyWx!='' && scope.row.lySpendPayAmountWxNativeXy != ''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountXyWx + scope.row.lySpendPayAmountWxNativeXy)/100).toFixed(2) }}</span></span>
                                  <span v-if="scope.row.lySpendPayAmountXyWx=='' && scope.row.lySpendPayAmountWxNativeXy == ''"><span
                                    class="skucost-pruice">0.00</span></span>
                  <span v-if="scope.row.lySpendPayAmountXyWx!='' && scope.row.lySpendPayAmountWxNativeXy == ''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountXyWx)/100).toFixed(2) }}</span></span>
                  <span v-if="scope.row.lySpendPayAmountXyWx=='' && scope.row.lySpendPayAmountWxNativeXy != ''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountWxNativeXy)/100).toFixed(2) }}</span></span>
                </span>
                <span v-if="scope.row.type==2">
                  <span v-if="scope.row.lyDepositPayAmountXyWx!='' && scope.row.lyDepositPayAmountWxNative!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountXyWx+scope.row.lyDepositPayAmountWxNative)/100).toFixed(2) }}</span></span>
                                                    <span v-if="scope.row.lyDepositPayAmountXyWx=='' && scope.row.lyDepositPayAmountWxNative==''"><span
                                                      class="skucost-pruice">0.00</span></span>
                  <span v-if="scope.row.lyDepositPayAmountXyWx=='' && scope.row.lyDepositPayAmountWxNative!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountWxNative)/100).toFixed(2) }}</span></span>
                  <span v-if="scope.row.lyDepositPayAmountXyWx!='' && scope.row.lyDepositPayAmountWxNative==''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountXyWx)/100).toFixed(2) }}</span></span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="lySpendPayAmountXyAli"
              label="翔宇支付宝" key="1">
              <template slot-scope="scope">
<!--                ({{scope.row.lySpendPayAmountAliNative}} = {{scope.row.lySpendPayAmountAliNativeJz}} + {{scope.row.lySpendPayAmountAliNativeXy}})-->
                <span v-if="scope.row.type==1">
                  <span v-if="scope.row.lySpendPayAmountXyAli!='' && scope.row.lySpendPayAmountAliNativeXy !=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountXyAli + scope.row.lySpendPayAmountAliNativeXy)/100).toFixed(2) }}</span></span>
                  <span v-if="scope.row.lySpendPayAmountXyAli=='' && scope.row.lySpendPayAmountAliNativeXy ==''"><span
                                    class="skucost-pruice">0.00</span></span>
                  <span v-if="scope.row.lySpendPayAmountXyAli=='' && scope.row.lySpendPayAmountAliNativeXy !=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountAliNativeXy)/100).toFixed(2) }}</span></span>
                  <span v-if="scope.row.lySpendPayAmountXyAli!='' && scope.row.lySpendPayAmountAliNativeXy ==''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountXyAli)/100).toFixed(2) }}</span></span>
                </span>
                <span v-if="scope.row.type==2">
                  <span v-if="scope.row.lyDepositPayAmountXyAli!='' && scope.row.lyDepositPayAmountAliNative!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountXyAli + scope.row.lyDepositPayAmountAliNative)/100).toFixed(2) }}</span></span>
                  <span v-if="scope.row.lyDepositPayAmountXyAli=='' && scope.row.lyDepositPayAmountAliNative==''"><span
                                                      class="skucost-pruice">0.00</span></span>
                  <span v-if="scope.row.lyDepositPayAmountXyAli=='' && scope.row.lyDepositPayAmountAliNative!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountAliNative)/100).toFixed(2) }}</span></span>
                  <span v-if="scope.row.lyDepositPayAmountXyAli!='' && scope.row.lyDepositPayAmountAliNative==''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountXyAli)/100).toFixed(2) }}</span></span>
                </span>

              </template>
            </el-table-column>
            <el-table-column
              prop="orderNum"
              label="君子微信" key="1">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1">
                  <span v-if="scope.row.lySpendPayAmountJzWx!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountJzWx + scope.row.lySpendPayAmountWxNativeJz)/100).toFixed(2) }}</span></span>
                  <span v-if="scope.row.lySpendPayAmountJzWx==''"><span
                    class="skucost-pruice">0.00</span></span>
                </span>
                <span v-if="scope.row.type==2">
                  <span v-if="scope.row.lyDepositPayAmountJzWx!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountJzWx)/100).toFixed(2) }}</span></span>
                                                    <span v-if="scope.row.lyDepositPayAmountJzWx==''"><span
                                                      class="skucost-pruice">0.00</span></span>
                </span>

              </template>
            </el-table-column>
            <el-table-column
              prop="orderNum"
              label="君子支付宝" key="1">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1">
                  <span v-if="scope.row.lySpendPayAmountJzAli!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lySpendPayAmountJzAli + scope.row.lySpendPayAmountAliNativeJz)/100).toFixed(2) }}</span></span>
                                  <span v-if="scope.row.lySpendPayAmountJzAli==''"><span
                                    class="skucost-pruice">0.00</span></span>
                </span>
                <span v-if="scope.row.type==2">
                  <span v-if="scope.row.lyDepositPayAmountJzAli!=''"><span
                    class="skucost-pruice">{{ (Number(scope.row.lyDepositPayAmountJzAli)/100).toFixed(2) }}</span></span>
                                                    <span v-if="scope.row.lyDepositPayAmountJzAli==''"><span
                                                      class="skucost-pruice">0.00</span></span>
                </span>

              </template>
            </el-table-column>


            <el-table-column
              prop="lySpendPayAmountAliNative"
              label="汇总" key="1">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1">
                  <span
                    class="skucost-pruice">
                      {{
                      (Number(scope.row.lySpendPayAmountXyWx + scope.row.lySpendPayAmountXyAli + scope.row.lySpendPayAmountJzWx + scope.row.lySpendPayAmountJzAli + scope.row.lySpendPayAmountWxNative + scope.row.lySpendPayAmountAliNative)/100).toFixed(2)
                    }}
                    </span>
                </span>
                <span v-if="scope.row.type==2">
                    <span
                      class="skucost-pruice">
                      {{ (Number(scope.row.lyDepositPayAmountXyWx + scope.row.lyDepositPayAmountXyAli + scope.row.lyDepositPayAmountJzWx + scope.row.lyDepositPayAmountJzAli + scope.row.lyDepositPayAmountWxNative + scope.row.lyDepositPayAmountAliNative)/100).toFixed(2) }}
                    </span>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>

  </basic-container>
  </div>

</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>


<script>

import website from "@/config/website";
import VueElementLoading from 'vue-element-loading';
import {loadRpSpendInfo} from "@/api/system/details";
import {mapGetters} from "vuex";
import {getToken} from "@/util/auth";
import {cloneObj, parseParam} from "@/util/util";
import moment from "moment";
export default {
  data() {
    return {
      leading:true,
      time: [new Date(new Date(moment().subtract(30, 'days').calendar().valueOf()).setHours(0, 0, 0, 0)),new Date(new Date().setHours(23, 59, 59, 0))],
      pickerOptions: website.pickerOptions,
      formInline: {
        wayName:'',
      },
      tableData:[],
      tableDataDeposit:[],
    };

  },
  components: {
    VueElementLoading
  },
  computed: {
    ...mapGetters(["userInfo", "roles"]),
  },

  created() {
    this.onSubmit();
  },

  methods: {
    getSumSpendPay(){
      let sums = [];
      sums[0] = '总计(小写)'
      sums[1] = '-'
      var sumXyWx = 0;
      var sumXyAli = 0;
      var sumJzWx = 0;
      var sumJzAli = 0;
      var sumNativWx = 0;
      var sumNativWxJz = 0;
      var sumNativWxXy = 0;
      var sumNativAli = 0;
      var sumNativAliJz = 0;
      var sumNativAliXy = 0;

      var sumXyWxD = 0;
      var sumXyAliD = 0;
      var sumJzWxD = 0;
      var sumJzAliD = 0;
      var sumNativWxD = 0;
      var sumNativAliD = 0;
      for(var i = 0; i < this.tableData.length; i++) {
        sumXyWx += this.tableData[i].lySpendPayAmountXyWx;
        sumXyAli += this.tableData[i].lySpendPayAmountXyAli;
        sumJzWx += this.tableData[i].lySpendPayAmountJzWx;
        sumJzAli += this.tableData[i].lySpendPayAmountJzAli;
        sumNativWx += this.tableData[i].lySpendPayAmountWxNative;
        sumNativWxJz += this.tableData[i].lySpendPayAmountWxNativeJz;
        sumNativWxXy += this.tableData[i].lySpendPayAmountWxNativeXy;
        sumNativAli += this.tableData[i].lySpendPayAmountAliNative;
        sumNativAliJz += this.tableData[i].lySpendPayAmountAliNativeJz;
        sumNativAliXy += this.tableData[i].lySpendPayAmountAliNativeXy;

        sumXyWxD += this.tableData[i].lyDepositPayAmountXyWx;
        sumXyAliD += this.tableData[i].lyDepositPayAmountXyAli;
        sumJzWxD += this.tableData[i].lyDepositPayAmountJzWx;
        sumJzAliD += this.tableData[i].lyDepositPayAmountJzAli;
        sumNativWxD += this.tableData[i].lyDepositPayAmountWxNative;
        sumNativAliD += this.tableData[i].lyDepositPayAmountAliNative;
      }
      sums[2] = ((sumXyWx + sumXyWxD + sumNativWxXy + sumNativWxD)/100).toFixed(2)
      sums[3] = ((sumXyAli + sumXyAliD + sumNativAliXy + sumNativAliD)/100).toFixed(2)
      sums[4] = ((sumJzWx + sumJzWxD + sumNativWxJz)/100).toFixed(2)
      sums[5] = ((sumJzAli + sumJzAliD + sumNativAliJz)/100).toFixed(2)
      //sums[6] = ((sumNativWx + sumNativWxD)/100).toFixed(2)
      //sums[7] = ((sumNativAli + sumNativAliD)/100).toFixed(2)
      sums[6] = ((sumXyWx + sumXyWxD + sumXyAli + sumXyAliD + sumJzWx + sumJzWxD + sumJzAli + sumJzAliD + sumNativWx + sumNativWxD + sumNativAli + sumNativAliD)/100).toFixed(2)
      return sums;
    },

    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    onSubmit(){
      var startTime = undefined;
      var endTime = undefined;
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
        this.formInline.startTime = startTime
        this.formInline.endTime = endTime
      }

      this.loading = true;
      loadRpSpendInfo(Object.assign(this.formInline)).then(res => {
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.tableData = data.spendPays;
        this.tableDataDeposit = data.depositPays;
        this.loading = false;
      });
    },
    handleExport() {
      this.$confirm("是否导出统计数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formInline)
        if (this.isNotEmpty(this.time)) {
          forming.startTime = this.time[0].getTime()
          forming.endTime = this.time[1].getTime()
        }
        window.location.href = `/api/blade-details/spend/export-rpspend?blade-auth=${getToken()}&${parseParam(forming)}`;

      });
    },
  }
}

</script>

<style>
</style>
